<!-- 
  针对日期时间相关有两个比较好用的 npm 包

    1. moment
    2. dayjs

 -->
<template>
  <div>
    <p>{{ $zs }}</p>
    <button @click="$msg('点我')">点我</button>
    <h1 v-bind:id="message | capitalize">过滤器 Filter</h1>
    <p>{{ message | capitalize }}</p>
    <p>{{ message | addZero("111", "222") }}</p>
    <p>{{ message | capitalize | addZero }}</p>

    <p>{{ time | dateFormat }}</p>

    <!-- Vue3 的玩法 -->
    <p>{{ format(time) }}</p>
  </div>
</template>

<script>
import dayjs from "dayjs";

export default {
  data() {
    return {
      message: "hello",
      time: 1698979930153,
    };
  },

  // 注册局部过滤器
  filters: {
    capitalize(value) {
      console.log("value", value);
      return value.charAt(0).toUpperCase() + value.slice(1);
    },

    addZero(value, text = "000") {
      console.log("addZero", text);
      return value + text;
    },

    dateFormat(value, text = "YYYY-MM-DD HH:mm:ss") {
      // const date = new Date(value);
      // const year = date.getFullYear();
      // const month = date.getMonth() + 1;
      // const da = date.getDate();
      // const hour = date.getHours();
      // const m = date.getMinutes();
      // const s = date.getSeconds();
      // return `${year}年${month}月${da}日 ${hour}:${m}:${s}`;

      return dayjs(value).format(text);
    },
  },

  methods: {
    format(value) {
      const date = new Date(value);
      const year = date.getFullYear();
      const month = date.getMonth() + 1;
      const da = date.getDate();
      const hour = date.getHours();
      const m = date.getMinutes();
      const s = date.getSeconds();
      return `${year}年${month}月${da}日 ${hour}:${m}:${s}`;
    },
  },
};
</script>
